colorswatch: Simplify drawing code

This adds a CSS box (complete with padding and border) for the icon. The
box is even drawn when no icon is present. Use the ".image" as the style
class here instead of -active-color-badge.

Use this box to draw the circle around the selection icon in Adwaita.

diff --git a/gtk/gtkcolorswatch.c b/gtk/gtkcolorswatch.c
index 9218a2c731a0444ae266a7c82ff738463ff23ce1..77846a62e9537e9af4d09d65d6916219e6d45437 100644 (file)
--- a/gtk/gtkcolorswatch.c
+++ b/gtk/gtkcolorswatch.c
@@ -101,7 +101,7 @@ gtk_color_swatch_init (GtkColorSwatch *swatch)
 }
 
 #define INTENSITY(r, g, b) ((r) * 0.30 + (g) * 0.59 + (b) * 0.11)
-#define ACTIVE_BADGE_RADIUS 10
+#define PIXBUF_SIZE 16
 
 static gboolean
 swatch_draw (GtkWidget *widget,
@@ -113,18 +113,19 @@ swatch_draw (GtkWidget *widget,
   GtkStyleContext *context;
   GtkStateFlags state;
   GtkIconTheme *theme;
+  GtkBorder border, padding;
+  GdkRectangle rect;
   GtkIconInfo *icon_info = NULL;
 
   theme = gtk_icon_theme_get_default ();
   context = gtk_widget_get_style_context (widget);
-  state = gtk_widget_get_state_flags (widget);
+  state = gtk_style_context_get_state (context);
   width = gtk_widget_get_allocated_width (widget);
   height = gtk_widget_get_allocated_height (widget);
 
   cairo_save (cr);
 
   gtk_style_context_save (context);
-  gtk_style_context_set_state (context, state);
 
   _gtk_theming_background_init (&background, context,
                                 0, 0, width, height,
@@ -184,54 +185,39 @@ swatch_draw (GtkWidget *widget,
 
   if (swatch->priv->icon)
     {
-      icon_info = gtk_icon_theme_lookup_icon (theme, swatch->priv->icon, 16,
+      icon_info = gtk_icon_theme_lookup_icon (theme, swatch->priv->icon, PIXBUF_SIZE,
                                               GTK_ICON_LOOKUP_GENERIC_FALLBACK
                                               | GTK_ICON_LOOKUP_USE_BUILTIN);
     }
   else if ((state & GTK_STATE_FLAG_SELECTED) != 0)
     {
-      GdkRGBA bg, border;
-      GtkBorder border_width;
       GIcon *gicon;
 
-      gtk_style_context_add_class (context, "color-active-badge");
-      _gtk_theming_background_init (&background, context,
-                                    (width - 2 * ACTIVE_BADGE_RADIUS) / 2, (height - 2 * ACTIVE_BADGE_RADIUS) / 2,
-                                    2 * ACTIVE_BADGE_RADIUS, 2* ACTIVE_BADGE_RADIUS,
-                                    GTK_JUNCTION_NONE);
+      gicon = g_themed_icon_new ("object-select-symbolic");
+      /* fallback for themes that don't have object-select-symbolic */
+      g_themed_icon_append_name (G_THEMED_ICON (gicon), "gtk-apply");
 
-      if (_gtk_theming_background_has_background_image (&background))
-        {
-          _gtk_theming_background_render (&background, cr);
-        }
-      else
-        {
-G_GNUC_BEGIN_IGNORE_DEPRECATIONS
-          gtk_style_context_get_background_color (context, state, &bg);
-          gtk_style_context_get_border_color (context, state, &border);
-G_GNUC_END_IGNORE_DEPRECATIONS
-          gtk_style_context_get_border (context, state, &border_width);
-
-          cairo_new_sub_path (cr);
-          cairo_arc (cr, width / 2, height / 2, ACTIVE_BADGE_RADIUS, 0, 2 * G_PI);
-          cairo_close_path (cr);
-          gdk_cairo_set_source_rgba (cr, &bg);
-          cairo_fill_preserve (cr);
-
-          gdk_cairo_set_source_rgba (cr, &border);
-          cairo_set_line_width (cr, border_width.left);
-          cairo_stroke (cr);
+      icon_info = gtk_icon_theme_lookup_by_gicon (theme, gicon, PIXBUF_SIZE,
+                                                  GTK_ICON_LOOKUP_GENERIC_FALLBACK
+                                                  | GTK_ICON_LOOKUP_USE_BUILTIN);
+      g_object_unref (gicon);
+    }
 
-          gicon = g_themed_icon_new ("object-select-symbolic");
-          /* fallback for themes that don't have object-select-symbolic */
-          g_themed_icon_append_name (G_THEMED_ICON (gicon), "gtk-apply");
+  gtk_style_context_restore (context);
 
-          icon_info = gtk_icon_theme_lookup_by_gicon (theme, gicon, 16,
-                                                      GTK_ICON_LOOKUP_GENERIC_FALLBACK
-                                                      | GTK_ICON_LOOKUP_USE_BUILTIN);
-          g_object_unref (gicon);
-        }
-    }
+  /* now draw the overlay image */
+  gtk_style_context_save (context);
+  gtk_style_context_add_class (context, GTK_STYLE_CLASS_IMAGE);
+  
+  gtk_style_context_get_border (context, state, &border);
+  gtk_style_context_get_padding (context, state, &padding);
+  rect.width = PIXBUF_SIZE + border.left + border.right + padding.left + padding.right;
+  rect.height = PIXBUF_SIZE + border.top + border.bottom + padding.top + padding.bottom;
+  rect.x = (width - rect.width) / 2;
+  rect.y = (height - rect.height) / 2;
+
+  gtk_render_background (context, cr, rect.x, rect.y, rect.width, rect.height);
+  gtk_render_frame (context, cr, rect.x, rect.y, rect.width, rect.height);
 
   if (icon_info != NULL)
     {
@@ -243,8 +229,8 @@ G_GNUC_END_IGNORE_DEPRECATIONS
       if (pixbuf != NULL)
         {
           gtk_render_icon (context, cr, pixbuf,
-                           (width - gdk_pixbuf_get_width (pixbuf)) / 2,
-                           (height - gdk_pixbuf_get_height (pixbuf)) / 2);
+                           rect.x + border.left + padding.left,
+                           rect.y + border.top + padding.top);
           g_object_unref (pixbuf);
         }
 

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 3c5a0e5a671c7c7151b5745d4eb3af8537024e1a..b010bce8aedfbd319528f047b3650476ab8c6b63 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -2832,16 +2832,22 @@ GtkColorSwatch {
   &:only-child {
     border-radius: 5px;
   }
-  &.color-active-badge {
-    border-width: 2px;
-    &:hover { background-image: none; }
-    &.color-light, &.color-light:hover {
-      color: transparentize(black,0.7);
-      border-color: transparentize(black,0.7);
-    }
-    &.color-dark, &.color-dark:hover {
-      color: transparentize(white,0.5);
-      border-color: transparentize(white,0.5);
+  &.image, &.image:hover {
+    /* turn off everything from regular color swatch */
+    border-width: 0px;
+    border-radius: 50%;
+    box-shadow: none;
+    background-image: none;
+    &:selected {
+      border-width: 2px;
+      &.color-light, &.color-light:hover {
+        color: transparentize(black,0.7);
+        border-color: transparentize(black,0.7);
+      }
+      &.color-dark, &.color-dark:hover {
+        color: transparentize(white,0.5);
+        border-color: transparentize(white,0.5);
+      }
     }
   }
 }

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 7e71c3a599647aa07faac23e049cf02ea967838b..6dee2346346ea7f0a5166c7e6181bca234492a63 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -4188,16 +4188,20 @@ GtkColorSwatch {
     border-bottom-right-radius: 5px; }
   GtkColorSwatch:only-child {
     border-radius: 5px; }
-  GtkColorSwatch.color-active-badge {
-    border-width: 2px; }
-    GtkColorSwatch.color-active-badge:hover {
-      background-image: none; }
-    GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
-      color: rgba(0, 0, 0, 0.3);
-      border-color: rgba(0, 0, 0, 0.3); }
-    GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
-      color: rgba(255, 255, 255, 0.5);
-      border-color: rgba(255, 255, 255, 0.5); }
+  GtkColorSwatch.image, GtkColorSwatch.image:hover {
+    /* turn off everything from regular color swatch */
+    border-width: 0px;
+    border-radius: 50%;
+    box-shadow: none;
+    background-image: none; }
+    GtkColorSwatch.image:selected, GtkColorSwatch.image:hover:selected {
+      border-width: 2px; }
+      GtkColorSwatch.image:selected.color-light, GtkColorSwatch.image:selected.color-light:hover, GtkColorSwatch.image:hover:selected.color-light, GtkColorSwatch.image:hover:selected.color-light:hover {
+        color: rgba(0, 0, 0, 0.3);
+        border-color: rgba(0, 0, 0, 0.3); }
+      GtkColorSwatch.image:selected.color-dark, GtkColorSwatch.image:selected.color-dark:hover, GtkColorSwatch.image:hover:selected.color-dark, GtkColorSwatch.image:hover:selected.color-dark:hover {
+        color: rgba(255, 255, 255, 0.5);
+        border-color: rgba(255, 255, 255, 0.5); }
 
 GtkColorChooserWidget #add-color-button {
   border-color: #2a2f2f;

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 1221968c7a2659d380f927e0a39a71228931fb37..81eed0e3a5f681f6b76638859e840a4ecaf5d7ab 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -4349,16 +4349,20 @@ GtkColorSwatch {
     border-bottom-right-radius: 5px; }
   GtkColorSwatch:only-child {
     border-radius: 5px; }
-  GtkColorSwatch.color-active-badge {
-    border-width: 2px; }
-    GtkColorSwatch.color-active-badge:hover {
-      background-image: none; }
-    GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
-      color: rgba(0, 0, 0, 0.3);
-      border-color: rgba(0, 0, 0, 0.3); }
-    GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
-      color: rgba(255, 255, 255, 0.5);
-      border-color: rgba(255, 255, 255, 0.5); }
+  GtkColorSwatch.image, GtkColorSwatch.image:hover {
+    /* turn off everything from regular color swatch */
+    border-width: 0px;
+    border-radius: 50%;
+    box-shadow: none;
+    background-image: none; }
+    GtkColorSwatch.image:selected, GtkColorSwatch.image:hover:selected {
+      border-width: 2px; }
+      GtkColorSwatch.image:selected.color-light, GtkColorSwatch.image:selected.color-light:hover, GtkColorSwatch.image:hover:selected.color-light, GtkColorSwatch.image:hover:selected.color-light:hover {
+        color: rgba(0, 0, 0, 0.3);
+        border-color: rgba(0, 0, 0, 0.3); }
+      GtkColorSwatch.image:selected.color-dark, GtkColorSwatch.image:selected.color-dark:hover, GtkColorSwatch.image:hover:selected.color-dark, GtkColorSwatch.image:hover:selected.color-dark:hover {
+        color: rgba(255, 255, 255, 0.5);
+        border-color: rgba(255, 255, 255, 0.5); }
 
 GtkColorChooserWidget #add-color-button {
   border-color: #c7c7c7;